<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '用户详情',
  },
}
</route>

<template>
  <view>
    <z-paging 
      ref="pagingRefs" 
      :safe-area-inset-bottom="true"
      :refresher-complete-delay="500"
      :auto="false"
      refresher-only 
      @onRefresh="onRefresh"
    >
      <template #top>
        <!-- 导航 -->
        <!--  #ifdef MP-WEIXIN -->
        <wd-navbar 
          placeholder 
          safeAreaInsetTop 
          :title="themeConfig.title" 
          left-arrow 
          @click-left="back"
        ></wd-navbar>
        <!--  #endif -->
      </template>

      <!-- 轮播图 -->
      <my-swiper :list="bannerList" imageMode="aspectFill" />

      <!-- 学历信息 -->
      <view 
        class="w-750rpx h-70rpx m-a flex-sb-center font-size-28rpx leading-33rpx color-white selected rounded-full box-border pl-34rpx pr-34rpx"
      >
        <view>
          <i class="iconfont icon-cil_education font-size-32rpx mr-10rpx inline-block color-white"></i>
          <text>{{ userProfileInfoVo.schoolName || '暂无' }}｜{{ userProfileInfoVo.educationLevelName || '--' }}</text>
        </view>
        <view>{{ userProfileInfoVo.educationTypeName || '--' }}</view>
      </view>

      <view class="w-750rpx m-a bg-white !mt-8rpx"
        :class="[{ 'dark-color2': themeConfig.theme === 'dark' }]"
      >
        <view class="w-center">
          <view class="flex-sb-center pt-30rpx">
            <view class="font-size-40rpx leading-47rpx font-bold">
              <text>{{ userProfileInfoVo.nickname || '--' }}</text>
              <text class="font-size-28rpx color-#666 ml-20rpx">ID: {{ userDetail.code || '--' }}</text>
            </view>
            <view class="flex">
              <view class="color-white bg-#F7622B rounded-12rpx font-size-20rpx flex-center w-123rpx h-34rpx mr-14rpx leading-0"
                v-if="userDetail.verificationFlag"
              >
                已实名认证
              </view>
              <view class="color-white bg-#F7622B rounded-12rpx font-size-20rpx flex-center w-100rpx h-34rpx leading-0"
                v-if="userDetail.membershipName"
              >
                {{ userDetail.membershipName }}
              </view>
            </view>
          </view>

          <view class="mt-12rpx">
            <wd-text 
              :text="`${userProfileInfoVo.gender == '0' ? '男' : '女'}·`" 
              size="28rpx" 
              color="#666"
            ></wd-text>
            <wd-text 
              :text="`${calculateAge(userProfileInfoVo.birthYearMonth)}岁`" 
              size="28rpx" 
              color="#666"
            ></wd-text>
            <wd-text 
              v-if="userProfileInfoVo.height"
              :text="`·${userProfileInfoVo.height}cm`" 
              size="28rpx" 
              color="#666"
            ></wd-text>
          </view>
          
          <view class="border-1px mt-24rpx"></view>

          <view class="w-4/5 pt-16rpx flex flex-wrap">
            <view class="mt-16rpx bg-#EADDFF rounded-full h-48rpx pl-16rpx pr-16rpx mr-16rpx flex-center"
              :class="[{ 'dark-color color-#999': themeConfig.theme === 'dark' }]"
              v-for="(item, index) in enumParams.userTagList"
              :key="index"
            >
              <text 
                class="font-size-24rpx leading-48rpx" 
                v-if="item.value === 'residenceName'"
              >{{ item.label }}: {{ userProfileInfoVo['cityName'] || '--' }}{{ userProfileInfoVo['districtName'] || '--' }}</text>
              <text class="font-size-24rpx leading-48rpx" v-else>{{ item.label }}: {{ userProfileInfoVo[item.value] || '--' }}</text>
              <text class="font-size-24rpx leading-48rpx">{{ item.desc }}</text>
            </view>
          </view>

          <view class="border-1px mt-86rpx"></view>

          <view class="mt-10rpx font-size-35rpx font-500 line-height-44rpx">择偶要求</view>
          
          <view class="w-9/10 py-16rpx flex flex-wrap">
            <view class="mt-16rpx bg-#f7f7f7 rounded-full h-48rpx pl-16rpx pr-16rpx mr-16rpx flex-center"
              :class="[{ 'dark-color color-#999': themeConfig.theme === 'dark' }]"
              v-for="(item, index) in enumParams.userRequireTagList"
              :key="index"
            >
              <text class="font-size-24rpx leading-48rpx" v-if="item.value === 'provinceName'">
                <text v-if="!preferencesDetail.provinceName">{{ item.label }}: 不限</text>
                <text v-else-if="preferencesDetail.provinceName === preferencesDetail.cityName">
                  {{ item.label }}: {{ preferencesDetail.cityName || '' }}{{ preferencesDetail.districtName || '' }}
                </text>
                <text v-else>
                  {{ item.label }}: {{ preferencesDetail.provinceName || '' }}{{ preferencesDetail.cityName || '' }}{{ preferencesDetail.districtName || '' }}
                </text>
              </text>
              <text 
                class="font-size-24rpx leading-48rpx" 
                v-else-if="typeof item.value === 'string'"
              >
                {{ item.label }}: {{ getTypeName(item.dictName, preferencesDetail[item.value]) }}
              </text>
              <text class="font-size-24rpx leading-48rpx" v-else>
                <text v-if="preferencesDetail[item.value[0]]">
                  {{ item.label }}: {{ preferencesDetail[item.value[0]] }}{{ item.desc }} - {{ preferencesDetail[item.value[1]] }}{{ item.desc }}
                </text>
                <text v-else>
                  {{ item.label }}: 不限
                </text>
              </text>
            </view>
          </view>

          <!-- <view class="mt-10rpx  font-size-28rpx leading-32rpx pb-24rpx">
            {{ userProfileInfoVo.partnerRequirements || '不限' }}
          </view> -->
        </view>
      </view>

      <view class="w-center !mt-18rpx">
        <view class="pl-42rpx pr-42rpx box-border bg-white pt-24rpx"
          :class="[{ 'dark-color2': themeConfig.theme === 'dark' }]"
        >
          <view class="relative flex-sb-center">
            <text class="font-size-35rpx font-500 leading-36rpx pl-20rpx">感情观</text>
            <view class="position-l-center w-4rpx h-24rpx rounded-full bg-#F7622B"></view>
          </view>
          <view class="mt-24rpx  font-size-28rpx leading-32rpx pb-24rpx">
            {{ userProfileInfoVo.loveView || '--' }}
          </view>
        </view>
      </view>
      
      <view class="w-center !mt-18rpx">
        <view class="pl-42rpx pr-42rpx box-border bg-white pt-24rpx"
          :class="[{ 'dark-color2': themeConfig.theme === 'dark' }]"
        >
          <view class="relative flex-sb-center">
            <text class="font-size-35rpx font-500 leading-36rpx pl-20rpx">心仪的Ta</text>
            <view class="position-l-center w-4rpx h-24rpx rounded-full bg-#F7622B"></view>
          </view>
          <view class="mt-24rpx  font-size-28rpx leading-32rpx pb-24rpx">
            {{ userProfileInfoVo.idealPartner || '--' }}
          </view>
        </view>
      </view>

      <view class="w-center !mt-18rpx">
        <view class="pl-42rpx pr-42rpx box-border bg-white mb-18rpx pt-24rpx"
          :class="[{ 'dark-color2': themeConfig.theme === 'dark' }]"
        >
          <view class="relative flex-sb-center">
            <text class="font-size-35rpx font-500 leading-36rpx pl-20rpx">关于我</text>
            <view class="position-l-center w-4rpx h-24rpx rounded-full bg-#F7622B"></view>
          </view>
          <view class="mt-24rpx  font-size-28rpx leading-32rpx pb-24rpx">
            {{ userProfileInfoVo.specialNote || '--' }}
          </view>
        </view>
      </view>

      <!-- 底部占位 -->
      <view class="h-168rpx"></view>

      <template #bottom>
        <!-- 私聊/拨打电话 -->
        <view class="position-b-center !fixed w-750rpx m-a pt-24rpx bg-white box-sd"
          :style="{ paddingBottom: safeAreaInsets.bottom + 'px' }"
          :class="[{ 'dark-color2': themeConfig.theme === 'dark' }]"
        >
          <view class="w-center flex-sb-center" style="justify-content: flex-end;">
            <view class="btn-full-r16 w-122rpx mr-24rpx">
              <wd-button 
                class="btn-w-full btn-h-78"
                :round="false"
                @click="openConversationList"
              >私信</wd-button>
            </view>
            <!-- <view class="btn-full-r16 w-230rpx">
              <wd-button 
                class="btn-w-full btn-h-78"
                :round="false"
                @click="getBindPhoneUserIdConfirm"
              >虚拟号通话</wd-button>
            </view> -->
            <view class="btn-full-r16 w-300rpx">
              <wd-button 
                class="btn-w-full btn-h-78"
                :round="false"
                @click="getPhoneConfirm"
              >
                <view class="shakeX inline-flex">
                  <i class="iconfont icon-dianzheli font-size-32rpx"></i>
                </view>
                查看联系方式
              </wd-button>
            </view>
          </view>
          <!-- <view class="font-size-22rpx leading-26rpx text-center color-#9C6DEF mt-16rpx"
            @click="getPhoneConfirm"
          >点这里，获取Ta的手机号</view> -->
          <!-- <view class="font-size-22rpx leading-26rpx text-center color-#9C6DEF mt-16rpx"
            @click="getBindPhoneUserIdConfirm"
          >虚拟号通话</view> -->
          
          <!-- 悬浮按钮列表 -->
          <view class="absolute right-32rpx top--84rpx tran-y-100 w-80rpx h-264rpx flex-sb flex-col flex-wrap">
            <!-- 转发 -->
            <view class="btn-sd bg-linear-1 w-80rpx h-80rpx flex-center rounded-full color-white relative flex-wrap">
              <wd-button custom-class="share-btn" open-type="share">分享</wd-button>
              <view class="w-80rpx flex-center">
                <i class="iconfont icon-fenxiang font-size-36rpx"></i>
              </view>
              <text class="inline-block font-size-20rpx mt--16rpx">分享</text>
            </view>
            <!-- 收藏 -->
            <view class="btn-sd bg-linear-1 w-80rpx h-80rpx flex-center rounded-full color-white flex-wrap"
              @click="changeBehaviorInfo('collect')"
              :class="[{ 'bg-linear-3': !collect }]"
            >
              <view class="w-80rpx flex-center">
                <i class="iconfont font-size-36rpx color-#7907C0" 
                  :class="[{ 'color-#7907C0': collect }, collect ? 'icon-shoucang1' : 'icon-shoucang']"
                ></i>
              </view>
              
              <text class="inline-block font-size-20rpx mt--16rpx"
                :class="[{ 'color-#8516BD': !collect }]"
              >收藏</text>
            </view>
            <!-- 点赞 -->
            <!-- :class="[{ 'bg-linear-4': like }]" -->
            <view class="btn-sd bg-linear-2 w-80rpx h-80rpx flex-center rounded-full color-white flex-wrap"
              :class="[{ 'bg-linear-4': !like }]"
              @click="changeBehaviorInfo('like')"
            >
              <view class="w-80rpx flex-center">
                <i class="iconfont font-size-36rpx color-#FB3C3C" 
                  :class="[{ 'color-#FB3C3C': like }, like ? 'icon-aixin1' : 'icon-aixin']"
                ></i>
              </view>
              <text class="inline-block font-size-20rpx mt--16rpx"
                :class="[{ 'color-#F7622B': !like }]"
              >点赞</text>
            </view>
          </view>
          <view class="pb-24rpx"></view>
        </view>
      </template>
    </z-paging>
    
    <wd-overlay :show="showOverlay" @click="showOverlay = false">
      <view class="w-702rpx bg-#fff position-center rounded-24rpx" @click.stop="">
        <view class="color-#1D2129 font-size-36rpx text-center pt-78rpx leading-42rpx">请联系客服</view>
        <!-- 该会员为优质会员，需联系客服获取该用户手机号。 -->
        <view class="w-448rpx m-a color-#1D2129 font-size-28rpx pt-32rpx leading-33rpx">
          本会员需私信或联系客服获取。
        </view>
        <view class="w-284rpx h-284rpx m-a !mt-40rpx bg-#f1f1f1 font-size-0 mb-84rpx">
          <wd-img 
            width="284rpx" 
            height="284rpx" 
            :round="false" 
            mode="aspectFill"
            :show-menu-by-longpress="true"
            src="" 
          />
        </view>

        <view class="absolute right-32rpx top-32rpx w-38rpx h-38rpx leading-38rpx"
          @click="showOverlay = false"
        >
          <i class="iconfont icon-close font-size-36rpx color-#2C2C2C"></i>
        </view>
      </view>
    </wd-overlay>
    
    <wd-overlay :show="showQrCode" @click="showQrCode = false">
      <view class="w-464rpx bg-#fff position-center rounded-24rpx" @click.stop="">
        <view class="w-400rpx h-400rpx m-a !mt-32rpx bg-#f1f1f1 rounded-24rpx font-size-0">
          <wd-img 
            width="400rpx" 
            height="400rpx" 
            :round="false"
            mode="aspectFill"
            :show-menu-by-longpress="true"
            :src="getQrCode" 
          />
        </view>
        <view class="color-#999 font-size-24rpx text-center pb-32rpx pt-24rpx">
          长按识别二维码联系对方
        </view>
      </view>
    </wd-overlay>

    <!-- 获取手机号需支付${amount}乐缘币 -->
    <!-- 按1，5.2，9.9，13.14每次循环收费 -->
    <wd-action-sheet 
      v-model="showPaySheet" 
      :actions="getActions" 
      cancel-text="取消"
      :title="`按1元/次收费`"
      @select="selectPayMethod"
    />

    <!-- 联系方式 -->
    <wd-action-sheet 
      v-model="showContact" 
      :actions="enumParams.contactActions" 
      cancel-text="取消"
      title="请选择要查看的联系方式"
      @select="selectContact"
    />
    
    <!-- 查看联系方式 -->
    <wd-action-sheet 
      custom-class="vip-bg-color"
      v-model="showVip" 
      :actions="enumParams.vipActions" 
      cancel-text="取消"
      title=""
      @select="selectVip"
    />
    
    <!-- 虚拟通话 -->
    <wd-action-sheet 
      custom-class="vip-bg-color"
      v-model="showPhoneTips" 
      :actions="enumParams.phoneVipActions" 
      cancel-text="取消"
      title=""
      @select="selectPhone"
    />
    
    <!-- 私信 -->
    <wd-action-sheet 
      custom-class="vip-bg-color"
      v-model="showChatTips" 
      :actions="enumParams.chatActions" 
      cancel-text="取消"
      title=""
      @select="selectChat"
    />
  </view>
</template>
  
<script lang="ts" setup>
import MySwiper from "@/components/swiper/my-swiper.vue";
import { enumParams, share } from "@/enum";
import { GetDefaultAmountConfigQueryCode, ReduceBalanceByType } from "@/service/db_index";
import { GetBindPhoneUserId, GetPreferencesQueryByUserId, UserBehaviorInfo, UserInfoQueryUser } from "@/service/db_user";
import { Main } from "@/service/types";
import { User } from "@/service/types/user";
import { useCommonStore, useThemeStore, useUserStore } from "@/store";
import { calculateAge, getActions, back } from "@/utils";
import { useMessage, useToast } from "wot-design-uni";

// 主题颜色
const { themeConfig } = useThemeStore();
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
// 用户信息
const user = useUserStore();
const common = useCommonStore();

const message = useMessage();
const loading = ref<boolean>(false);
const userDetail = ref({} as User.UserInfoQueryUserDetail);
const userProfileInfoVo = computed(() => (userDetail.value.userProfileInfoVo || {} as User.UserProfileInfoVo));

const getTypeName = computed(() => {
  return (dictName, typeCode) => {
    const list = common.commonState.dictInfo[dictName] || [];
    const item = list.find(item => item.typeCode === typeCode) || {} as any;
    return item.typeName || '不限';
  }
})

const showQrCode = ref(false);
const getQrCode = computed(() => {
  const _userProfileInfoVo = userDetail.value.userProfileInfoVo || {} as any;
  const _wechatQrCodeFile = _userProfileInfoVo.wechatQrCodeFile || {} as any;
  return _wechatQrCodeFile.preUrl || '';
})

// 轮播图数据列表
const bannerList = ref([]);
const pagingRefs = ref();
/**
 * 获取用户详情
 * @param id 用户id
 */
const getUserInfoQueryUser = async () => {
  try {
    loading.value = true;
    const res = await UserInfoQueryUser({ id: userId.value });
    pagingRefs.value.complete();
    loading.value = false;
    const data = res.data || {} as User.UserInfoQueryUserDetail;
    userDetail.value = data;

    const userProfileInfoVo = data.userProfileInfoVo || {} as User.UserProfileInfoVo;
    const list = userProfileInfoVo.personalImageryInfoVoList || [];
    list.forEach(item => {
      const { 
        fileInfoVo = {} as User.FileInfoVo
      } = item || {} as User.PersonalImageryInfoVoItem;
      item.preUrl = fileInfoVo.preUrl || '';
    })
    bannerList.value = list || [];

    // 更新点赞收藏状态
    like.value = data.like;
    collect.value = data.collect;
    uni.hideLoading();

    // 获取金额
    // getDefaultAmountConfigQueryCode();
    getPreferencesQueryByUserId();
  } catch (error) {
    uni.hideLoading();
    loading.value = false;
    console.log('error', error)
  }
}

const collect = ref(false);
const like = ref(false);
const likeLoading = ref(false);
/**
 * 点赞/收藏
 * @param actionType 行为类型
 */
const changeBehaviorInfo = async (type) => {
  if (likeLoading.value) return;
  let actionType = '';
  // 收藏
  if (type === 'collect') {
    actionType = collect.value ? 'noCollect' : 'collect';
  }
  
  // 点赞
  if (type === 'like') {
    actionType = like.value ? 'unlike' : 'like';
  }
  
  try {
    uni.showLoading({
      title:'加载中...',
    })
    likeLoading.value = true;
    const { data } = await UserBehaviorInfo({
      actionType,
      userId: user.userInfo.id,
      actorId: userDetail.value.id
    });
    likeLoading.value = false;
    getUserInfoQueryUser();
    user.getUserInfo();
  } catch (error) {
    uni.hideLoading();
    likeLoading.value = false;
    console.log(error)
  }
}

const showChatTips = ref(false);
// 选择去私信
const selectChat = (options) => {
  const { item } = options || {};
  if (item.type === 'vip') {
    uni.navigateTo({ url: '/feature/vip' });
  } else {
    toChat();
  }
}

const toast = useToast();
// 私聊
const openConversationList = () => {

  if (!user.isLogined) {
    uni.navigateTo({ url: '/pages/login/index' });
    return
  }
  
  // if (!user.getUseVo.userProfileInfoVo.nickname && !user.userInfo.matchmakerFlag) {
  //   setTimeout(() => {
  //     uni.navigateTo({ url: '/activity/info' });
  //   }, 1000)
  //   return toast.show('请先完善个人资料');
  // }
  
  if (!user.activityInfo.id) {
    toast.show('请先填写部分资料');
    setTimeout(() => {
      uni.navigateTo({ url: '/activity/addActivityInfo?isChat=1' })
    }, 1000)
    return
  }
  
  if (!isVip()) {
    showChatTips.value = true;
    return;
  }
  // 1v1 chat: conversationID = `C2C${userID}`
  // group chat: conversationID = `GROUP${groupID}`
  // const conversationID = 'C2C' + userId.value;
  // uni.navigateTo({
  //   url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}`
  // });

  toChat();
}

// 跳转私信
const toChat = () => {
  uni.navigateTo({
    url: `chatRoom?conversationID=${userId.value}`
  });
}

const amount = ref(0);
const freeCharge = ref(false);
// 获取手机号需要的金额
const getDefaultAmountConfigQueryCode = async (callback = () => {}) => {
  try {
    const res = await GetDefaultAmountConfigQueryCode({
      code: 'getPhone'
    })
    const data = res.data || {} as Main.DefaultAmountConfigQueryCode;
    amount.value = data.amount;
    freeCharge.value = data.freeCharge;
    callback && callback();
  } catch (error) {
    console.log(error);
  }
}

// 是否vip
const isVip = () => {
  const { matchmakerFlag, membershipFlag, partnerFlag } = user.userInfo || {};
  return matchmakerFlag || membershipFlag || partnerFlag;
}

// 判断是否为vip，是vip直接弹出支付
const hasVip = () => {
  if (isVip()) {
    showPaySheet.value = true;
  } else {
    showVip.value = true;
  }
}

// 获取手机号弹窗提示
const getPhoneConfirm = () => {
  // 如果不是红娘，需要完善信息
  // && !user.userInfo.matchmakerFlag
  if (!user.getUseVo.userProfileInfoVo.nickname) {
    setTimeout(() => {
      uni.navigateTo({ url: '/activity/info' });
    }, 1000)
    return toast.show('请先完善个人资料');
  }
  if (userDetail.value.hiddenPhone) {
    // showOverlay.value = true;
    message.alert({
      title: '该会员需通过“私信”或“虚拟号通话”或“客服”联系对方'
    })
    return
  }

  // 获取金额后回调
  getDefaultAmountConfigQueryCode(() => {
    if (freeCharge.value) return makeCall(userDetail.value.phone);
    const { showPhone, showWechat } = userDetail.value.userProfileInfoVo || {};
    if (showPhone && showWechat) {
      showContact.value = true;
    } else if (showWechat) {
      contactType.value = 'showWechat';
      hasVip();
    } else {
      contactType.value = 'showPhone';
      hasVip();
    }
  });
}

// 显示支付方式
const showPaySheet = ref(false);

// 选择支付方式
const selectPayMethod = (options) => {
  const { item } = options || {};
  if (item.type === 'wechat') {
    common.paymentMsgConfirm({
      userId: user.userInfo.id,
      type: 'getPhone',
    }, () => {
      // 充值成功
      // makeCall(userDetail.value.phone);
      getContact();
    }, false, message, true)
  } else {
    getPhone();
  }
}

// 获取联系方式
const getContact = () => {
  if (contactType.value === 'showWechat') {
    showQrCode.value = true;
  } else {
    makeCall(userDetail.value.phone);
  }
}

const showContact = ref(false);
const contactType = ref('showPhone');
// 选择联系方式
const selectContact = (options) => {
  const { item } = options || {};
  contactType.value = item.type;
  showContact.value = false;
  hasVip();
}

const showVip = ref(false);
// 选择vip
const selectVip = (options) => {
  const { item } = options || {};
  if (item.type === 'vip') {
    uni.navigateTo({ url: '/feature/vip' });
  } else {
    showPaySheet.value = true;
  }
}

const showOverlay = ref(false);
// 获取手机号
const getPhone = async () => {
  try {
    const res = await ReduceBalanceByType({
      userId: user.userInfo.id,
      type: 'getPhone'
    })
    if (res.code == '6000012') {
      // common.paymentMsgConfirm({
      //   userId: user.userInfo.id,
      //   type: 'getPhone',
      // }, () => {
      //   // 充值成功
      //   makeCall(userDetail.value.phone);
      // }, false, message)
      return 
    }
    if (res.code == 200) {
      // makeCall(userDetail.value.phone);
      getContact();
    }
  } catch (error) {
    console.log(error)
  }
}

// 获取虚拟电话
// const getBindPhoneUserId = async () => {
//   // 如果不是红娘，需要完善信息
//   if (!user.getUseVo.userProfileInfoVo.nickname && !user.userInfo.matchmakerFlag) {
//     setTimeout(() => {
//       uni.navigateTo({ url: '/activity/info' });
//     }, 1000)
//     return toast.show('请先完善个人资料');
//   }
  
//   try {
//     const res = await GetBindPhoneUserId({
//       userIdA: user.userInfo.id,
//       userIdB: userId.value
//     })
//     makeCall(res.data);
//   } catch (error) {
//     console.log(error)
//   }
// }

const showPhoneTips = ref(false);
// 获取虚拟电话
const getBindPhoneUserIdConfirm = () => {
  return toast.show('测试中');
  if (!user.isLogined) {
    uni.navigateTo({ url: '/pages/login/index' });
    return
  }
  if (!user.activityInfo.id) {
    toast.show('请先填写资料');
    setTimeout(() => {
      uni.navigateTo({ url: '/activity/addActivityInfo' })
    }, 1000)
    return
  }
  if (!isVip()) {
    showPhoneTips.value = true;
    return;
  }
  phoneConfirm();
}

// 选择虚拟的通话
const selectPhone = (options) => {
  const { item } = options || {};
  if (item.type === 'vip') {
    uni.navigateTo({ url: '/feature/vip' });
  } else {
    getBindPhoneUserId();
    // phoneConfirm();
  }
}

// 虚拟通话弹窗提示
const phoneConfirm = () => {
  message
    .confirm({
      msg: '虚拟通话每分钟0.12个乐缘币，\n充值更优惠',
      title: '通话收费提示'
    })
    .then(() => {
      getBindPhoneUserId();
    })
    .catch(() => {
      console.log('点击了取消按钮')
    })
}

const getBindPhoneUserId = async () => {
  try {
    const res = await GetBindPhoneUserId({
      userIdA: user.userInfo.id,
      userIdB: userDetail.value.id
    })
    if (res.code == '6000012') {
      // common.paymentMsgConfirm({
      //   userId: user.userInfo.id,
      //   amount: 1,
      // }, () => {
      //   makeCall(res.data);
      // }, true, message)
      return 
    }
    makeCall(res.data);
  } catch (error) {
    console.log(error)
  }
}

// 拨打电话
const makeCall = (phoneNumber = '') => {
  uni.makePhoneCall({
    phoneNumber,
    success: (success) => {
      console.log(success)
    }
  })
}

const preferencesDetail = ref({} as User.PreferencesDetail);
/** 获取用户择偶要求表详情 */
const getPreferencesQueryByUserId = async () => {
  try {
    const res = await GetPreferencesQueryByUserId({
      userId: userId.value,
    })
    preferencesDetail.value = res.data || {} as User.PreferencesDetail;
  } catch (error) {
    console.log(error)
  }
}

const userId = ref('');
onLoad((options) => {
  const { id } = options || {};
  userId.value = id;
})

// 分享
onShareAppMessage(() => {
  const id = user.userInfo.id || '';
  const { gender, sharePhotoUrl } = userProfileInfoVo.value || {};
  const call = gender == '0' ? '他' : '她';
  return {
    // title: '我满心期待，与你相遇的未来！',
    title: `乐缘号为${userDetail.value.code}的征婚者，我觉得${call}很不错，可以认识一下!`,
    path: `/activity/userDetail?id=${userId.value || ''}&instrId=${id}`,
    // share
    // imageUrl: _fileInfoVo.preUrl
    imageUrl: sharePhotoUrl
  }
})

const onRefresh = () => {
  getUserInfoQueryUser();
}

onShow(() => {
  nextTick(() => {
    // 设置页面标题
    themeConfig.title = '用户详情';
  })
  getUserInfoQueryUser();
})
</script>

<style lang="scss" scoped>
// 轮播图高度
:deep(.wd-swiper__track) {
  height: 637rpx !important;
}

:deep(.wd-action-sheet__action) {
  padding-left: 4rpx;
  padding-right: 4rpx;
  height: auto !important;

  .wd-action-sheet__name {
    line-height: 48rpx;
    white-space: pre-wrap;
  }
}

@keyframes shakeX {
  from,
  to{
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-16rpx, 0, 0);
  }
}

.shakeX{
  animation-name: shakeX;
  animation-duration: .5s;
  animation-iteration-count: infinite;
}

.selected {
  background: linear-gradient( 180deg, #9C6DEF 0%, #E5C4FF 100%);
}
</style>
